<template>
    <div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
          v-for="(item,index) in breadList"
          :key="index"
          :to="{ path: item.path }"
        >{{item.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
            <el-form-item label="门票名称" prop="ticketname">
            <el-input v-model="ruleForm.ticketName" />
            </el-form-item>
            <el-form-item label="票价" prop="price">
            <el-input v-model="ruleForm.price" type="number" step="0.01" /> 
            </el-form-item>
            <el-form-item label="可用日期" prop="availabilityDate">
            <el-date-picker v-model="ruleForm.availabilityDate" type="date" /> 
            </el-form-item>
            <el-form-item label="票数" prop="quantityAvailable">
            <el-input v-model="ruleForm.quantityAvailable" type="number" step="1" /> 
            </el-form-item>
        </el-form>
        </div>
        <div>
          <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
        </div>
      </div>
    </div>
  </template>
  <script>
  import {useRouter, useRoute } from 'vue-router'
  import { ref, reactive, watch } from "vue";
  import request from "../../utils/request";
  import { ElNotification } from "element-plus";
  export default {
    setup() {
        let breadList = [] // 路由集合
    const route = useRoute()
    const getBreadcrumb=(url)=> {
      let matched = url.matched;
      //如果不是首页
      if ("Home"==matched[0].name) {
        matched[0].meta =  { title: "系统首页" } 
      }
      breadList = matched;
    }
      watch(route, (newValue, oldValue) => {
        // console.log(222222,newValue)
        getBreadcrumb(newValue)
      },{ deep: true, immediate: true });
      
      const resetForm = (formEl) => {
        if (!formEl) return;
        formEl.resetFields();
      };
      const submitForm = async (formEl) => {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            console.log("提交更新", fields);
            request
              .request({
                url: "/ticket/add",
                method: "post",
                data: {
                  ticketId: ruleForm.ticketId, 
                  ticketName: ruleForm.ticketName,
                  price: ruleForm.price,
                  availabilityDate: ruleForm.availabilityDate,
                  quantityAvailable: ruleForm.quantityAvailable,
                },
              })
              .then((res) => {
                if (res.data.code == 200) {
                  ElNotification({
                    title: "更新成功",
                    message: "成功更新门票信息",
                  });
                } else {
                  ElNotification({
                    title: "更新失败",
                    message: "请联系管理员检查失败原因",
                  });
                }
              })
              .catch((e) => {
                ElNotification({
                  title: "更新失败",
                  message: "请联系管理员检查失败原因",
                });
              });
          } else {
            ElNotification({
              title: "校验失败",
              message: "请重新填写信息",
            });
          }
        });
      };
      const ruleForm = reactive({
        ticketId: null,
        ticketName: "",
        price: null, 
        availabilityDate: null, 
        quantityAvailable: null, 
    });

      const rules = reactive({
        ticketname: [
          {
            message: "请输入门票名",
            trigger: "blur",
          },
        ],
        price: [
        {
            required: true,
            message: "请输入价格",
            trigger: "blur",
        },
        {
            validator: (rule, value, callback) => {
            const priceRegex = /^\d+(\.\d{1,2})?$/; 
            if (!priceRegex.test(value)) {
                callback(new Error("最多两位小数"));
            } else {
                callback(); // 验证通过
            }
            },
            trigger: "blur",
        },
        ],

        availabilityDate: [
          {
            required: true,
            message: "请输入可用日期",
            trigger: "blur",
          },
        ],
        quantityAvailable: [
          {
            required: true,
            message: "请输入票数",
            trigger: "blur",
          },
        ],

      });
      const ruleFormRef = ref();
      const centerDialogVisible = ref(false);
      return {
        breadList,
        resetForm,
        ruleFormRef,
        submitForm,
        ruleForm,
        rules,
        centerDialogVisible,
        
      };
    },
  };
  </script>
  <style lang="scss" scoped>
  .handle-box {
    margin-bottom: 20px;
  }
  
  .handle-select {
    width: 120px;
  }
  
  .handle-input {
    width: 300px;
    display: inline-block;
  }
  
  .table {
    width: 100%;
    font-size: 14px;
  }
  
  .red {
    color: #ff0000;
  }
  
  .mr10 {
    margin-right: 10px;
  }
  
  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
  </style>
  